<template>
	<view class="test-detail">
		
		<view class="top" style="z-index: 2;">
			<uni-icons style="margin-left: 30rpx;" type="left" size="30" color="#2c2c2c" @click="toBackPage">
			</uni-icons>
		
			<view>
				{{examRecordInfo.examTitle}}
			</view>
		
			<view style="display: flex;flex-direction: row;align-items: center;">
				<uni-icons style="margin-right: 40rpx;" type="plus" size="30" color="#2c2c2c"></uni-icons>
				<!-- <uni-icons style="margin-right: 40rpx;" type="more-filled" size="30" color="#2c2c2c"></uni-icons> -->
			</view>
		</view>
		
		
		<view class="head">
			<view class="title">
				{{examRecordInfo.examTitle}}
			</view>
			<view class="notice">
				{{examRecordInfo.examDescription}}
			</view>
			<view v-if="examRecordInfo.status === 0">
				<view>剩余时间{{lastTime.hours.length === 1 ? "0"+lastTime.hours : lastTime.hours}}:
					{{lastTime.minutes.length === 1 ? "0"+lastTime.minutes : lastTime.minutes}}:
					{{lastTime.seconds.length === 1 ? "0"+lastTime.seconds : lastTime.seconds}}
				</view>
			</view>
			<view v-else>
				<view>本次得分：</view>
				<view class="score">{{ examRecordInfo.score }}/{{ examRecordInfo.criteria }}</view>
				<!--            <view class="time">提交时间：{{ result.time }}</view>-->
				<view v-if="examRecordInfo.status === 1">如果你认为本次测试成绩不理想，可以选择<span class="again">再做一次</span></view>
			</view>
		</view>
		<view class="test-list">
			<view class="test-item" v-for="(problemSubmission, problemSubmissionIndex) in submissionList"
				:key="problemSubmission.id">
				<view class="title">
					<view>{{ problemSubmissionIndex + 1 }}</view>
					<view class="type">{{ problemType[problemSubmission.problemType] }}</view>
					<view>({{ problemSubmission.criteria }}分)</view>
					<view>{{ problemSubmission.problemDescription }}</view>
				</view>
				<view class="option-area">
					<view class="option-list" v-if="problemSubmission.problemType===0">
						<view class="option-item" v-for="(option, optionIndex) in problemSubmission.options"
							:key="optionIndex" @click="chooseSheet(problemSubmissionIndex, optionIndex)">
							<view class="code"
								:class="{'selected-code':sheet[problemSubmissionIndex]===optionIndex, 'wrong-code': problemSubmission.isRight === false && examRecordInfo.status !== 0}">
								{{optionType[optionIndex]}}
							</view>
							<view class="text">
								{{option}}
							</view>
						</view>
					</view>
					<view class="option-list" v-if="problemSubmission.problemType===1">
						<view class="option-item" v-for="(option, optionIndex) in problemSubmission.options"
							:key="optionIndex" @click="chooseBatchSheet(problemSubmissionIndex, optionIndex)">
							<view class="code"
								:class="{'selected-code':sheet[problemSubmissionIndex].includes(optionIndex), 'wrong-code': problemSubmission.isRight === false && examRecordInfo.status !== 0}">
								{{optionType[optionIndex]}}
							</view>
							<view class="text">
								{{option}}
							</view>
						</view>
					</view>
					<view class="option-list" v-if="problemSubmission.problemType===2">
						<view class="text-area">
							<view class="option" v-for="(option, optionIndex) in problemSubmission.options"
								:key="optionIndex">
								<view style="display: flex;flex-direction: row;margin-top: 20rpx;align-items: center;">
									<span>第{{optionIndex+1}}空:</span>
									<input v-if="examRecordInfo.status > 0" disabled="disabled"
										style="background-color: #c6c6c6;border-radius:10rpx;margin-left: 20rpx;padding-left: 20rpx;font-size: 28rpx;"
										v-model="sheet[problemSubmissionIndex][optionIndex]"></input>
									<input v-if="examRecordInfo.status === 0"
										style="background-color: white;border-radius:10rpx;margin-left: 20rpx;padding-left: 20rpx;font-size: 28rpx;"
										v-model="sheet[problemSubmissionIndex][optionIndex]"></input>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="answer-area" v-if="examRecordInfo.status > 0">
					<view :class="problemSubmission.isRight ? 'right' : 'wrong'"
						v-if="problemSubmission.problemType !== 2">
						<span>正确答案：{{ problemSubmission.rightAnswer.toString() | toRealAnswer() }} </span>
						<span v-if="problemSubmission.isRight">你选对了 </span>
						<span v-else>你选错了 </span>
						<span>{{ problemSubmission.score }}/{{ problemSubmission.criteria }}</span>
					</view>
					<view style="margin-top: 20rpx;" :class="problemSubmission.isRight ? 'right' : 'wrong'" v-else>
						<span>正确答案：</span>
						<view style="display: flex;flex-direction: column;margin-top: 20rpx;margin-bottom: 20rpx;"
							v-for="(item,index) in problemSubmission.rightAnswer" :key="index">
							<span>{{index+1}}、{{ item.toString()}}</span>
						</view>
						<span v-if="problemSubmission.isRight">你填对了 </span>
						<span v-else>你填错了 </span>
						<span>{{ problemSubmission.score }}/{{ problemSubmission.criteria }}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-button" @click="submitExam()" v-if="examRecordInfo.status === 0">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				examRecordInfo: {},
				submissionList: [],
				problemType: ["单选", "多选", "填空"],
				optionType: ["A", "B", "C", "D", "E", "F"],
				examStatus: ["进行中", "已结束"],
				sheet: [],
				lastTime: {
					hours: 0,
					minutes: 0,
					seconds: 0
				},
				interval: null
			};
		},
		filters: {
			inputType(problemType) {
				switch (problemType) {
					case 0:
						return "radio";
					case 1:
						return "checkbox";
					default:
						return "text";
				}
			},
			toRealAnswer(str) {
				let r = str.split(',');
				return r.map(v => String.fromCharCode(v.charCodeAt(0) + 17)).toString()
			}
		},
		onLoad(options) {
			let examRecordId = options.recordId
			this.queryExamRecordInfo(examRecordId)
		},
		methods: {
			chooseSheet(problemSubmissionIndex, optionIndex) {
				this.sheet[problemSubmissionIndex] = optionIndex
				this.$forceUpdate()
				console.log(this.sheet)
			},
			chooseBatchSheet(problemSubmissionIndex, optionIndex) {
				if (this.sheet[problemSubmissionIndex]) {
					if (!this.sheet[problemSubmissionIndex].includes(optionIndex))
						this.sheet[problemSubmissionIndex].push(optionIndex)
					else
						this.sheet[problemSubmissionIndex].forEach(function(item, index, arr) {
							if (item == optionIndex) {
								arr.splice(index, 1);
							}
						});
				} else {
					this.sheet[problemSubmissionIndex] = [optionIndex]
				}
				this.$forceUpdate()
				console.log(this.sheet)
			},
			queryExamRecordInfo(examRecordId) {
				this.$api.queryExamRecordInfo({
					examRecordId
				}).then((res) => {
					let record = res.data;
					this.examRecordInfo = record
					let submissionList = record.submissions;
					if (record.status === 2 || record.status === 1) {
						// 已结束,需要对比正误
						submissionList.forEach((submission, i) => {
							if (submission.problemType === 2) {
								let rightAnswers = JSON.parse(submission.rightAnswer)
								let answer = submission.answer
								this.sheet[i] = answer.split(",");
								submission.rightAnswer = rightAnswers
								submission.isRight = rightAnswers.includes(answer);
								console.log("填空题",this.sheet[i])
							} else {
								let rightAns = parseInt(submission.rightAnswer)
								let myAns = parseInt(submission.answer)
								if (submission.problemType === 0) {
									this.sheet[i] = this.numberToIndex(myAns);
									submission.rightAnswer = this.numberToIndex(rightAns);
								} else if (submission.problemType === 1) {
									this.sheet[i] = this.numberToIndexs(myAns);
									submission.rightAnswer = this.numberToIndexs(rightAns);
								}
								submission.isRight = rightAns === myAns;
							}
						});
					} else {
						// 进行中
						// 启动计时器
						let lastSeconds = record.lastSeconds

						this.lastTime.hours = Math.trunc(lastSeconds / 3600)
						this.lastTime.minutes = Math.trunc(lastSeconds / 60) - this.lastTime.hours * 60
						this.lastTime.seconds = lastSeconds - this.lastTime.minutes * 60 - this.lastTime.hours *
							3600

						let that = this
						this.interval = setInterval(function() {
							if (that.lastTime.seconds === 0) {
								if (that.lastTime.minutes === 0) {
									if (that.lastTime.hours !== 0) {
										that.lastTime.hours--
										that.lastTime.minutes = 59
									} else {
										that.submitExam()
										this.queryExamRecordInfo(this.examRecordInfo.id)
										that.lastTime = {
											hours: 0,
											minutes: 0,
											seconds: 0
										}
										clearInterval(that.interval)
									}
								}
								that.lastTime.minutes--
								that.lastTime.seconds = 59
							}
							that.lastTime.seconds--
						}, 1000)

						submissionList.forEach((submission, i) => {
							if (submission.problemType === 2) {
								let answer = submission.answer
								this.sheet[i] = answer.split(",");
							} else {
								let answer = parseInt(submission.answer)
								if (answer) {
									if (submission.problemType === 0) {
										this.sheet[i] = this.numberToIndex(answer);
									} else if (submission.problemType === 1) {
										this.sheet[i] = this.numberToIndexs(answer);
									}
								} else {
									if (submission.problemType === 0) {
										this.sheet[i] = "";
									} else {
										this.sheet[i] = [];
									}
								}
							}
						});
					}
					this.submissionList = submissionList;
					this.$forceUpdate()
					console.log("提交信息", this.submissionList)
				});
			},
			submitExam() {
				let answerResult = this.sheet.map((v, i) => {
					let submissionRecord = this.submissionList[i];
					let result = {
						problemId: submissionRecord.problemId,
						answer: ''
					};
					if (submissionRecord.problemType == 2) {
						console.log("某一个题目", v)
						// 填空题
						for (let i = 0; i < v.length; i++) {
							result.answer = result.answer + v[i] + ","
						}
						result.answer = result.answer.slice(0, result.answer.length - 1)
					} else {
						if (Array.isArray(v)) {
							result.answer = v.reduce((a, b) => a + Math.pow(2, 3 - b), 0).toString();
						} else {
							result.answer = Math.pow(2, 3 - v).toString();
						}
					}
					return result;
				})
				let result = {
					examRecordId: this.examRecordInfo.id,
					submissions: answerResult
				}
				this.$api.submitExam(result).then(() => {
					this.$message.success("已提交")
				});
			},
			numberToIndex(answer) {
				return 3 - Math.log2(answer)
			},
			numberToIndexs(answer) {
				let result = [];
				if (answer & 8) {
					result.push(0);
				}
				if (answer & 4) {
					result.push(1);
				}
				if (answer & 2) {
					result.push(2);
				}
				if (answer & 1) {
					result.push(3);
				}
				return result;
			},
		},
	}
</script>

<style lang="scss" scoped>
	
	
	
	.test-detail {
		padding-bottom: 20rpx;
		
		.top {
			position: sticky;
			top: 0;
			background-color: white;
			border-bottom: solid thin #d1d1d1;
		
		
			width: 100%;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-top: 100rpx;
			
			// #ifdef H5
			padding-top: 40rpx;
			// #endif
		}
		
		
		.head {
			padding: 0 80rpx 20rpx;
			
			margin-top: 60rpx;
		
			.title {
				font-size: 36rpx;
				color: #2C2C2C;
			}
		
			.notice {
				font-size: 28rpx;
				color: #838080;
				margin-top: 4rpx;
			}
		}
		
		.test-list {
			width: 94%;
			margin-left: 3%;
			margin-top: 20rpx;
		}
		
		.test-item {
			background-color: #F0F0F0;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
		
			.title {
				display: flex;
				flex-direction: row;
				align-items: center;
		
				.serial,
				.type,
				.score {
					display: inline-block;
				}
			}
		
			.type {
				width: 80rpx;
				height: 40rpx;
				text-align: center;
				border: 2rpx solid #619DFF;
				border-radius: 10rpx;
				color: #619DFF;
				font-size: 24rpx;
				margin: 0 6rpx;
			}
		
			.score {
				padding: 0 6rpx;
			}
		}
		
		.option-item {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding: 10rpx;
			width: fit-content;
		
			.code {
				width: 50rpx;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 50%;
				background-color: #FAFAFA;
			}
		
			.selected-code {
				color: #FAFAFA;
				background-color: #79adff;
		
				&.wrong-code {
					color: #FAFAFA;
					background-color: #dd4b5f;
				}
			}
		
		
			.text {
				margin-left: 10rpx;
			}
		}
		
		.submit-button {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background-color: #619DFF;
			font-size: 32rpx;
			color: #fff;
			height: 80rpx;
			margin: 0 80rpx;
			border-radius: 40rpx;
		
		}
		
		
		
	}

	
</style>
